
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"content="width=device-width;" >
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/main.css" />

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/highcharts.js"></script>
    <script type="text/javascript" src="js/exporting.js"></script>
    <script type="text/javascript">
    Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });
    
    function updateData(x,y)
    {
        var series = chart.series[0];
        series.addPoint([x, y], true, true);
    }
    
    var chart;
    $(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'chart_spline', //图表放置的容器，DIV
                defaultSeriesType: 'spline', //图表类型为曲线图

            },
            title: {
                text: '     '  //图表标题
            },
            xAxis: { //设置X轴
                type: 'datetime',  //X轴为日期时间类型
                tickPixelInterval: 150  //X轴标签间隔
            },
         
            //yAxis: { //设置Y轴
            //    title: '',
            //    max: 180, //Y轴最大值
            //    min: 0 , //Y轴最小值
            //    minorTickInterval: 2,//最小刻度
            //    tickPixelInterval:20//刻度间隔

           // },
         
            yAxis:
            [
                    { //第一个Y轴，序号为0
                     labels: {
                              format: '{value}°C',
                              style: {
                                      color: '#89A54E'
                                      },
                              formatter: function(){ return this.value+'℃'}
                              },
                       title: {
                               text: '温度曲线显示表',
                               style: {
                                        color: '#89A54E'
                                        }
                               },
                         max: 180, //Y轴最大值
                         min: 0 , //Y轴最小值
                         minorTickInterval: 2,//最小刻度
                         tickPixelInterval:20//刻度间隔
                    },
                    { //第二个Y轴，序号为1
                     title: {
                             text: '当前温度',
                             style: {
                                     color: '#89A54E'
                                     }
                             },
                     labels: {
                              format: '{value}°C',
                              style: {
                                      color: '#89A54E'
                                      },
                              formatter: function(){ return this.value+'℃'}
                              },
                      max: 180, //Y轴最大值
                      min: 0 , //Y轴最小值
                      minorTickInterval: 2,//最小刻度
                      tickPixelInterval:20,//刻度间隔
                      opposite: true
                     }
            ],
            tooltip: {//当鼠标悬置数据点时的提示框
                formatter: function() { //格式化提示信息
                    return '<b>温度</b><br/>'+
                    Highcharts.dateFormat('%H:%M:%S', this.x) +'<br/>'+
                    Highcharts.numberFormat(this.y, 2)+'℃';
                }
            },
            //配置数据使其点显示信息
            plotOptions: {
                 spline : {
                    dataLabels: {
                          enabled: false //不显示温度值
                     },
                     marker: {
                        enabled: false //不显示数据点
                     },
                     enableMouseTracking: true
                 }
            },
            legend: {
                enabled: false  //设置图例不可见
            },
            exporting: {
                enabled: false  //设置导出按钮不可用
            },
            credits: {
                text: '', //设置LOGO区文字
                href: '' //设置LOGO链接地址
            },
            series:
            [
                 {data:
                  (
                      function()
                      { //设置默认数据，这里是假数据，如果有真数据可以在页面加载时候用真数据替换掉
                          var data = [],
                          time = (new Date()).getTime(),
                          i;
                         
                          for (i = -266; i <= 0; i++)
                          {
                              data.push
                              (
                                  {
                                       x: time + i * 5000,
                                       y: 0//Math.random()*100
                                  }
                             );
                          }
                          return data;
                      }
                   )(),
                   yAxis:1
                  }
             ]
        });
    });
    </script>
    </head>

    <body>
        <div id="main">
            <!--
             <h2 class="top_title">实时温度曲线图</h2>
            -->
            <div id="chart_spline" ></div>
        </div>
    </body>
</html>
